<script>
import section1 from './modules/Section-1/section-1.vue';
import section2 from './modules/Section-2/section-2.vue';
import section3 from './modules/Section-3/section-3.vue';
import section4 from './modules/Section-4/section-4.vue';
export default {
  name: "monitor",
  components: {
    section1,
    section2,
    section3,
    section4
  },
  data() {
    return {
    };
  },
  computed: {
  },
  watch: {},
  mounted() {
  },
  beforeUnmount() { },
  methods: {
  },
};
</script>

<template>
  <!-- layout 外包层 -->
  <div class="monitor">
    <div class="titles-area">
      <div class="main-title font-alimamashuheiti">
        监测管理
      </div>
      <div class="sub-title font-AlibabaPuhui">
        实时监控供热系统各项运行指标
      </div>
    </div>
    <div class="inner">
      <div class="item">
        <section-1></section-1>
      </div>
      <div class="item">
        <section-2></section-2>
      </div>
      <div class="item">
        <section-3></section-3>
      </div>
      <div class="item">
        <section-4></section-4>
      </div>
    </div>

  </div>
</template>
<style></style>
<style lang="less">
.monitor {
  height: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &>.inner {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    &>.item {
      &:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }

      &:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
      }

      &:nth-child(3) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
      }

      &:nth-child(4) {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
      }
    }
  }


}

.titles-area {
  &>.main-title {
    font-size: 2rem;
    line-height: 2;
  }

  &>.sub-title {
    font-size: 1.4rem;
    color: #9e9e9e;
    line-height: 2;
  }
}
</style>
